<template>
<div>
    <article id="tipsIndex" class="pdgSideSp">
        <h1>南昌Metro地铁乘坐小贴士</h1>
        <section id="tips_index">
            <div v-for="(item, index) in tips" :key="index">
                <h2 class="h2Center">{{ item.name }}</h2>
                <div :class="item.class">
                    <div v-for="(infoItem, j) in item.info" :key="j" class="block">
                        <a href="#" target="_blank">
                            <div class="pic">
                                <img :src="infoItem.img" width="206" height="94" alt>
                            </div>
                            <div class="txt">
                                <h3>{{ infoItem.title }}</h3>
                                <p>{{ infoItem.para }}</p>
                            </div>
                            <div class="btnView showSp">查看更多</div>
                        </a>
                    </div>
                </div>
            </div>
        </section>
        <section class="relatedLinksCard tipsRelated">
            <h2 class="h2Center">相关链接</h2>
            <div class="wrapper">
                <a href="#" target="_blank" v-for="(item, index) in links" :key="index">
                    <div class="block">
                        <h3>{{ item.title }}</h3>
                        <div class="pic">
                            <img :src="item.img" alt width="62" height="60">
                        </div>
                    </div>
                </a>
            </div>
        </section>
        <section class="bnrCol4">
            <div class="block">
                <a href="#" target="_blank">
                    <img src="../../../public/img/tips/bnr_01.png" alt>
                </a>
            </div>
        </section>
    </article>
    <div class="breakCrumb">
        <ul>
            <li>
                <a href="../../../public/index.html">首页</a>
            </li>
            <li>南昌地铁乘坐小贴士</li>
        </ul>
    </div>
    <div id="pageTop">
        <a href="#tipsIndex">
            <img src="../../../public/img/tips/icon_pagetop.png" alt="返回首页" width="50" height="50">
        </a>
    </div>
</div>
</template>

<script>
// window.onload = function() {
//     var blocks = document.querySelectorAll("#tips_index .linkIndexCol2 .block");
//     var i = 0;
//     for (; i < blocks.length; i++) {
//         block[i].querySelector(".txt h3").style.textDecoration = "underline";
//     }
// }
export default {
    data() {
        return {
            tips : [
                {
                    name: "机场交通/南昌地铁乘坐方法",
                    class: "linkIndexCol2",
                    info: [
                        {
                            img: "img/tips/img_access_01.jpg",
                            title: "从机场出发的交通路线",
                            para: "介绍从昌北机场到南昌地铁的交通信息。"
                        },
                        {
                            img: "img/tips/img_access_02.jpg",
                            title: "为什么选择南昌地铁",
                            para: "为您介绍为什么南昌地铁是环游南昌最便捷的出行方式。"
                        },
                        {
                            img: "img/tips/img_access_03.jpg",
                            title: "搭乘地铁前",
                            para: "为您介绍如何找到正确的车站入口及顺利搭乘地铁的方法。"
                        },
                        {
                            img: "img/tips/img_access_04.jpg",
                            title: "下车后的出站方法",
                            para: "介绍南昌地铁的乘车资讯，让您快速了解搭乘方法。"
                        }
                    ]
                },
                {
                    name: "帮助与指南",
                    class: "linkIndexCol2 support",
                    info: [
                        {
                            img: "img/tips/img_support_01.jpg",
                            title: "南昌地铁指南",
                            para: "南昌地铁为了方便广大游客，发行了中文（繁体字和简体字）、\
                                英文、韩文和泰文的指南手册。"
                        },
                        {
                            img: "img/tips/img_support_02.jpg",
                            title: "南昌地铁旅客问讯处",
                            para: "我们将提供有关南昌地铁旅客问讯处及服务经理的有用信息。"
                        },
                        {
                            img: "img/tips/img_support_03.jpg",
                            title: "欢迎板",
                            para: "介绍南昌地铁的欢迎板，帮助游客前往各个景点。"
                        },
                        {
                            img: "img/tips/img_support_04.jpg",
                            title: "免费无限上网（Free Wi-Fi）",
                            para: "所有南昌地铁均可免费使用无线上网，让你在地下也可以无线上网。"
                        },
                        {
                            img: "img/tips/img_support_05.jpg",
                            title: "下载应用程序",
                            para: "提供免费应用，帮助游客搜寻南昌地铁系统的换乘咨询。"
                        }
                    ]
                },
                {
                    name: "礼貌与安全",
                    class: "linkIndexCol2 notes_index",
                    info: [
                        {
                            img: "img/tips/img_notes_01.jpg",
                            title: "乘车须知",
                            para: "介绍乘坐南昌地铁的礼仪及文化。"
                        },
                        {
                            img: "img/tips/img_notes_02.jpg",
                            title: "袖珍安全指南",
                            para: "袖珍安全指南是一本手册，介绍了用于乘客安全的各项措施、\
                                应急程序以及发生紧急情况时要考虑的重要事项。"
                        },
                        {
                            img: "img/tips/img_notes_03.jpg",
                            title: "就是不要卷入犯罪纠纷里",
                            para: "免于'犯罪·纠纷'的保身艺术"
                        }
                    ]
                }
            ],
            links: [
                {
                    title: "下载应用程序",
                    img: "img/tips/img_01.png"
                },
                {
                    title: "运行路线图",
                    img: "img/tips/img_02.png"
                },
                {
                    title: "Nanchang Subway Ticket",
                    img: "img/tips/ticket_otoku05.png"
                },
                {
                    title: "乘坐南昌地铁游览南昌",
                    img: "img/tips/img_09.png"
                },
            ]
        }
    }
}
</script>

<style scoped>
@import "../../assets/css/common.css";
 
* {
    box-sizing: border-box;
}
article {
    max-width: 1280px;
    padding: 0 68px 120px;
    margin: 0 auto;
    margin-top: 150px;
} 

h1 {
    position: relative;
    font-size: 2.4rem;
    color: #00467e;
    text-align: center;
    word-break: break-all;
    padding-bottom: 20px;
    margin-bottom: 82px;
}

h1::before, h1::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 49px;
    height: 4px;
    background-color: #00a3d9;
    display: block;
    margin-left: -49px;
}

h1::after {
    background-color: #00467e;
    margin-left: 1px;
}

section {
    display: block;
}

.h2Center {
    font-size: 1.9rem;
    color: #00467e;
    text-align: center;
    margin: 20px 0 48px;
}

.linkIndexCol2 {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    max-width: 1146px;
    padding-bottom: 8px;
    margin: 0 auto;
}

.linkIndexCol2 .block {
    position: relative;
    width: 48.7%;
    padding: 34px 0 0;
    margin-bottom: 56px;
    overflow: hidden;
}

.linkIndexCol2 .block::before,
.linkIndexCol2 .block::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 99px;
    height: 4px;
    background-color: #00a3d9;
}
.linkIndexCol2 .block::after {
    width: 100%;
    left: 100px;
    background-color: #c5d7dd;
}

.linkIndexCol2 .block a {
    position: relative;
    color: #000;
    text-decoration: none;
}

#tips_index
.linkIndexCol2
.block:first-child
.pic {
    padding: 5px;
}

.linkIndexCol2
.pic {
    float: left;
    position: relative;
    display: flex;
    justify-content: center;
    align-self: center;
    width: 38.6%;
    height: 144px;
    background-color: #edf6f9;
    /* margin-bottom: 20px; */
}

.linkIndexCol2
.block
.pic::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    opacity: 0;
    transition: opacity .3s;
    z-index: 2;
}

#tips_index
.linkIndexCol2
.pic
img {
    width: 100%;
    height: auto;
    margin-top: 13px;
    margin-bottom: 13px;
}

#tips_index
.linkIndexCol2
.pic:hover {
    background-color: rgba(0, 0, 0, 0.1);
    opacity: 1;
}

.linkIndexCol2
.txt {
    float: right;
    width: 61.4%;
    padding-left: 23px;
}

.linkIndexCol2
.block
h3 {
    font-size: 1.4rem;
    color: #00467e;
    background: url("../../../public/img/icon_arrow_blue.png")
        no-repeat left 10px;
    background-size: 7px 12px;
    padding: 0 0 0 15px;
    margin-bottom: 15px;
    word-break: keep-all;
}

.linkIndexCol2
.block
p {
    font-size: .9rem;
    line-height: 1.6;
    padding: 0 13px 0 15px;
}

.linkIndexCol2
.block
h3:hover {
    text-decoration: underline;
}

.linkIndexCol2
.block
a::after {
    content: '';
    clear: both;
}

.relatedLinksCard .wrapper {
    display: flex;
    justify-content: space-between;
    max-width: 1146px;
    margin: 0 auto;
    flex-wrap: wrap;
}

.showSp {
    display: none;
}

.relatedLinksCard a {
    position: relative;
    display: flex;
    align-self: center;
    width: 23.1%;
    min-height: 100px;
    text-decoration: none;
    color: #00467e;
    padding-left: 18px;
    border: 1px solid #ccc;
}

.relatedLinksCard .block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.relatedLinksCard a:hover {
    background-color: rgba(0, 0, 0, 0.1);
    opacity: 1;
}

.relatedLinksCard h3 {
    font-size: 1rem;
    line-height: 1.25;
    background: url("../../../public/img/icon_arrow_blue.png") no-repeat left 3px;
    background-size: 7px auto;
    padding-left: 16px;
}

.relatedLinksCard a .pic {
    width: 23.4%;
    margin-right: 4.9%;
}

.relatedLinksCard .pic {
    min-width: 30px;
}

.relatedLinksCard .pic img {
    width: 100%;
    height: auto;
}

.bnrCol4 {
    margin-top: 50px;
}

.bnrCol4 a {
    position: relative;
    display: flex;
    align-items: center;
    width: 23.1%;
    text-decoration: none;
}

.bnrCol4 a img {
    width: 100%;
}

.breakCrumb {
    max-width: 1280px;
    padding: 0 68px;
    margin: 0 auto 22px;
}

.breakCrumb ul {
    display: flex;
    list-style: none;
}

.breakCrumb li {
    font-size: .75rem;
    color: #000;
}

.breakCrumb li a {
    color: #00467e;
    text-decoration: none;
}

.breakCrumb li a::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 11px;
    background: url("../../../public/img/tips/icon_bread_arrow.png") no-repeat;
    background-size: 6px auto;
    margin: 0 11px;
}

#pageTop {
    position: fixed;
    bottom: 30px;
    right: 27px;
    z-index: 2;
    transition: all .2s linear;
}

/* 移动端 */
@media screen and (max-width: 700px) {
    article {
        padding: 0 15px;
    }
    .linkIndexCol2 .block {
        width: 100%;
    }

    .linkIndexCol2 .block .pic {
        width: 100%;
        height: 300px;
    }

    .linkIndexCol2 .block .txt {
        float: none;
        padding-left: 0px;
        margin-bottom: 20px;
    }

    .linkIndexCol2 .block .txt h3 {
        color: #000;
        padding-left: 0;
        font-size: 1.2rem;
    }

    .linkIndexCol2 .block .txt p {
        padding-left: 0;
        width: 600px;
    }

    .linkIndexCol2 .block .pic img {
        height: auto;
    }

    .linkIndexCol2 .showSp {
        display: block;
        width: 100%;
        background-color: #00467e;
        
    }
    .linkIndexCol2 .btnView {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 50px;
        font-size: 1.2rem;
        background-color: #00467e;
        border-radius: 3px;
        color: #fff;
        
    }

    .linkIndexCol2 .btnView::before {
        content: '';
        display: inline-block;
        width: 6px;
        height: 12px;
        background: url("../../../public/img/tips/icon_view_arrow.png") no-repeat;
        background-size: 6px auto;
        margin-right: 6px;
    }

    .relatedLinksCard a {
        display: block;
        width: 48.4%;
    }

    .relatedLinksCard a:nth-child(2n+1) {
        margin: 8px;
    }
    .relatedLinksCard a .pic {
        margin-top: 15px;
    }

    .breakCrumb {
        margin: 20px auto 22px;
    }
}
</style>